import React from 'react'
import { NavBar, TabBar } from "antd-mobile";
import {

  useLocation,
  MemoryRouter as Router,
  useNavigate,
} from "react-router-dom";
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
function Tabbat() {
  const navigate = useNavigate()
  const location = useLocation();
  const { pathname } = location;

  const setRouteActive = (value) => {
    navigate(value);
  };
  const tabs = [
    {
      key: "/home",
      title: "首页",
      icon: <AppOutline />,
    },
    {
      key: "/xx",
      title: "消息",
      icon: <MessageOutline />,
    },
    {
      key: "/my",
      title: "我的",
      icon: <UserOutline />,
    },
  ];
  return (
    <div>
      <TabBar activeKey={pathname} onChange={(value) => setRouteActive(value)}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  )
}

export default Tabbat
